<template>
  <el-dialog :title="info.title" v-if="visible" :visible.sync="visible" center width="1260px" :before-close="handleCancel">
    <el-form ref="formDate" label-suffix=":" label-width="140px" :rules="rules" :model="form">
      <el-row>
        <el-col :span="8">
          <el-form-item label="开始时间" prop="begin_time">
            <el-date-picker
              v-model="form.begin_time"
              type="date"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              size="small"
              clearable
              style="width: 100%"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="截止时间" prop="end_time">
            <el-date-picker
              v-model="form.end_time"
              type="date"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              size="small"
              clearable
              style="width: 100%"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="部门" prop="dept_id">
            <DeptSelect v-model="form.dept_id" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <div :class="'f-label' + (rules.today_work ? ' f-label-verify' : '')">本周工作内容:</div>
          <el-button type="primary" size="mini" icon="el-icon-plus" circle class="fr mr20" @click="handleAddTodayMatters()"></el-button>
          <el-table class="search-table" :data="form.today_matters" border fit highlight-current-row style="width: 97%;">
            <el-table-column label="序号" align="center" width="56px">
              <template slot-scope="{$index}">
                {{ $index + 1 }}
              </template>
            </el-table-column>
            <el-table-column label="工作内容" width="285px">
              <template slot-scope="{row}">
                <el-input type="textarea" :rows="3" v-model="row.matter" size="small" clearable />
              </template>
            </el-table-column>
            <el-table-column label="完成情况" width="120px">
              <template slot-scope="{row}">
                <el-select v-model="row.status" size="small" style="width: 100%">
                  <el-option
                    v-for="item in statuss"
                    :key="item.key"
                    :label="item.value"
                    :value="item.key"
                  />
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="备注" min-width="120px">
              <template slot-scope="{row}">
                <el-input type="textarea" :rows="3" v-model="row.remark" size="small" clearable />
              </template>
            </el-table-column>
            <el-table-column v-if="info.type !== 'view'" fixed="right" label="操作" align="center" width="90px">
              <template slot-scope="{row,$index}">
                <el-button size="mini" type="danger" @click="handleDeleteTodayMatters(row,$index)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
        <el-col :span="22" class="mt20">
          <el-form-item label="本周工作总结" prop="summarize">
            <el-input type="textarea" :rows="4" v-model="form.summarize" size="small" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <div :class="'f-label' + (rules.today_work ? ' f-label-verify' : '')">下周工作计划:</div>
          <el-button type="primary" size="mini" icon="el-icon-plus" circle class="fr mr20" @click="handleAddTomorrowMatters()"></el-button>
          <el-table class="search-table" :data="form.tomorrow_matters" border fit highlight-current-row style="width: 97%;">
            <el-table-column label="序号" align="center" width="56px">
              <template slot-scope="{$index}">
                {{ $index + 1 }}
              </template>
            </el-table-column>
            <el-table-column label="工作内容" width="285px">
              <template slot-scope="{row}">
                <el-input type="textarea" :rows="3" v-model="row.matter" size="small" clearable />
              </template>
            </el-table-column>
            <el-table-column label="预计完成时间" width="170px">
              <template slot-scope="{row}">
                <el-date-picker
                    v-model="row.status"
                    type="date"
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd"
                    size="small"
                    clearable
                    style="width: 100%"
                  />
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column label="备注" min-width="120px">
              <template slot-scope="{row}">
                <el-input type="textarea" :rows="3" v-model="row.remark" size="small" clearable />
              </template>
            </el-table-column>
            <el-table-column v-if="info.type !== 'view'" fixed="right" label="操作" align="center" width="90px">
              <template slot-scope="{row,$index}">
                <el-button size="mini" type="danger" @click="handleDeleteTodayMatters(row,$index)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
        <el-col :span="22" class="mt20">
          <el-form-item label="附件" prop="files">
            <Upload v-model="form.files" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div class="fr mt10">
            <el-button size="small" @click="handleCancel()">取 消</el-button>
            <el-button type="primary" size="small" @click="handleEdit()">保 存</el-button>
          </div>
        </el-col>
      </el-row>
    </el-form>
  </el-dialog>
</template>

<script>
import { files } from '@/api/file/cos'
import { addWeek, updWeek, weekMatters } from '@/api/report/report'
import form from '@/utils/form'
import DeptSelect from '@/myComponents/DeptSelect'
import StaffSelect from '@/myComponents/StaffSelect'
import Upload from '@/myComponents/Upload'

export default {
  components: { DeptSelect, StaffSelect, Upload },
  extends: form,
  props: {
    reqAdd: {
      default: addWeek,
      type: Function
    },
    reqUpd: {
      default: updWeek,
      type: Function
    }
  },
  data() {
    return {
      today_matters:[],
      tomorrow_matters:[],
      statuss: [{ key: '进行中', value: '进行中' }, { key: '已完成', value: '已完成' }],
      rules: {
        dept_id: [{ required: true, trigger: 'blur', message: '部门不可为空' }],
        begin_time: [{ required: true, trigger: 'blur', message: '开始时间' }],
        end_time: [{ required: true, trigger: 'blur', message: '截止时间' }],
        summarize: [{ required: true, trigger: 'blur', message: '明日工作计划不可为空' }],
        today_work: [{ required: true, trigger: 'blur', message: '本周工作内容不可为空' }],
        tomorrow_work: [{ required: true, trigger: 'blur', message: '下周工作计划不可为空' }]
      }
    }
  },
  watch: {
    visible(val) {
      if (val) {
        this.form = this.info.edit
        this.$set(this.form, 'today_matters', [])
        this.$set(this.form, 'tomorrow_matters', [])
        this.$set(this.form, 'files', '[]')
        if(this.info.type === 'edit'){
          this.getFiles()
          this.getMatters()
        }
      }
    }
  },
  mounted() {
  },
  methods: {
    handleAddTodayMatters() {
      this.form.today_matters.push({})
    },
    handleDeleteTodayMatters(row, index) {
      this.form.today_matters.splice(index, 1)
    },
    handleAddTomorrowMatters() {
      this.form.tomorrow_matters.push({})
    },
    handleDeleteTomorrowMatters(row, index) {
      this.form.tomorrow_matters.splice(index, 1)
    },
    handleEditBefore() {
      let matters = []
      this.form.today_matters.forEach(e => {
        if(e.matter && e.matter !== '') {
          let j = {}
          j.matter = e.matter || ''
          j.status = e.status || ''
          j.remark = e.remark || ''
          j.type = '1'
          matters.push(j)
        }
      })
      this.form.tomorrow_matters.forEach(e => {
        if(e.matter && e.matter !== '') {
          let j = {}
          j.matter = e.matter || ''
          j.status = e.status || ''
          j.remark = e.remark || ''
          j.type = '2'
          matters.push(j)
        }
      })
      this.form.matters = JSON.stringify(matters)
    },
    getFiles() {
      files({e_id: this.form.id, db_type: 'logc_report_week_archives'}).then(response => {
        this.$set(this.form, 'files', JSON.stringify(response.list))
      }).catch(err => {
        this.$message.error(err.msg)
      })
    },
    getMatters() {
      weekMatters({week_id: this.form.id}).then(response => {
        response.list.forEach(e => {
          if(e.type === 1) {
            this.form.today_matters.push(e)
          }else if(e.type === 2) {
            this.form.tomorrow_matters.push(e)
          }
        })
        // this.list = response.list
      }).catch(err => {
        this.$message.error(err.msg)
      })
    }
  }
}
</script>

<style>
.f-label{
  text-align: right;
  vertical-align: middle;
  float: left;
  font-size: 14px;
  color: #606266;
  line-height: 40px;
  padding: 0 12px 0 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-weight: 700;
}
.f-label-verify:before {
    content: "*";
    color: #ff4949;
    margin-right: 4px;
}
</style>
